import { Button , VerticalBox, HorizontalBox} from "std-widgets.slint";

struct TileData {
    image: image,
    image-visible: bool,
    solved: bool,
}

component MemoryTile inherits Rectangle {
    in property <bool> open-curtain;
    in property <bool> solved;
    in property <image> icon;

    callback clicked;

    border-radius: 8px;
    background: root.solved ? #70ff00 : #858585;

    animate background { duration: 800ms; }

    Image {
        source: root.icon;
        width: parent.width - 16px;
        height: parent.height - 16px;
        x: 8px;
        y: 8px;
    }

    // Left curtain
    Rectangle {
        x: 0;
        background: #0025ff;
        border-radius: 4px;
        width: root.open-curtain ? 0px : parent.width / 2 + 4px;
        height: parent.height;
        clip: true;

        animate width { duration: 250ms; easing: ease-in; }

        Image {
            width: root.width - 32px;
            height: root.height - 32px;
            x: 16px;
            y: 16px;
            source: @image-url("icons/tile_logo.png");
        }
    }

    // Right curtain
    right-curtain := Rectangle {
        background: #0025ff;
        border-radius: 4px;
        x: root.open-curtain ? parent.width : parent.width / 2 - 4px;
        width: root.open-curtain ? 0px : parent.width / 2 + 4px;
        height: parent.height;
        clip: true;

        animate width { duration: 250ms; easing: ease-in; }
        animate x { duration: 250ms; easing: ease-in; }

        Image {
            width: root.width - 32px;
            height: root.height - 32px;
            x: right-curtain.width - self.width - 16px;
            y: 16px;
            source: @image-url("icons/tile_logo.png");
        }
    }

    TouchArea {
        clicked => {
            root.clicked();
        }

        width: 100%;
        height: 100%;
    }
}

export component AppWindow inherits Window {
    in property <bool> disable-tiles;
    in property <string> game-time;
    
    in property <[TileData]> memory-tiles-default : [
        { image: @image-url("icons/at.png") },
        { image: @image-url("icons/balance-scale.png") },
        { image: @image-url("icons/bicycle.png") },
        { image: @image-url("icons/bus.png") },
        { image: @image-url("icons/cloud.png") },
        { image: @image-url("icons/cogs.png") },
        { image: @image-url("icons/motorcycle.png") },
        { image: @image-url("icons/video.png") },
    ];
    in-out property <[TileData]> memory-tiles : memory-tiles-default;

    callback check-if-pair-solved();
    callback show_welldone_window();
    callback close_welldone_window;
    callback play_again();
    callback exit_game();
    callback clear_tiles();
    callback show_all();

    show_welldone_window() => {
        welldone-popup.show();
    }
    close_welldone_window => {
        welldone-popup.close();
    }
    clear-tiles => {
        memory-tiles = memory-tiles-default;
    }


    welldone_popup := PopupWindow {
        y: 100px;
        width: root.width;
        height: 60px;
        close-on-click: false;

        Rectangle {
            background: root.background;
        }

        welldone_layout := Dialog {
            height: 100%;
            width: 100%;
            welldone_text := Text {
                text: "恭喜完成游戏！需要 再来一把吗？\n" + root.game-time;
                font-size: root.default-font-size + 8px;
            }

            Button {
                text: "再来一把！";
                dialog-button-role: action;
                clicked => {
                    root.play-again();
                }
            }

            Button {
                text: "退出游戏";
                dialog-button-role: action;
                clicked => {
                    root.exit-game();
                }
            }
        }
    }



    private property <length> tile-size: 80px;
    private property <length> tile-spacing: 10px;
    private property <int> row-count: 4;
    private property <int> column-count: 4;
    private property <length> info-box-hight: 10px;

    // "column_count + 1" and "row_count + 1" are the number of gaps between the tiles.
    width: (root.column-count * root.tile-size) + ((root.column-count + 1) * root.tile-spacing);
    height: (root.row-count * root.tile-size) + ((root.row-count + 1) * root.tile-spacing) + 30px;
    title: "Memory Game - Slint Demo";
    icon: @image-url("icons/tile_logo.png");

    VerticalBox {
        padding: 0px;
        
        HorizontalBox {
            padding-left: 10px;
            padding-right: 10px;
            padding-top: 0px;
            padding-bottom: 0px;
            // Button {
            //     height: 30px;
            //     text: "abc";
            // }

            Button {
                height: 30px;
                text: "揭示这个世界！";
                clicked => {
                    show-all();
                }
            }
        }   

        Rectangle {
            for tile[i] in root.memory-tiles: MemoryTile {
                clicked => {
                    if (!root.disable-tiles) {
                        tile.image-visible = !tile.image-visible;
                        root.check-if-pair-solved();
                    }
                }
        
                x: root.tile-spacing + mod(i, root.column-count) * (root.tile-size + root.tile-spacing);
                y: root.tile-spacing + floor(i / root.row-count) * (root.tile-size + root.tile-spacing);
                width: root.tile-size;
                height: root.tile-size;
        
                icon: tile.image;
        
                open-curtain: tile.image-visible || tile.solved;
                solved: tile.solved;
            }
        }
    }

}